<template>
  <button 
    class="cesium-button" 
    :class="{ 
      'icon-only': !!icon && !$slots.default,
      [type]: true,
      [size]: true,
      active,
      disabled
    }"
    :title="title"
    @click="!disabled && $emit('click')"
  >
    <img v-if="icon" :src="icon" class="button-icon" />
    <slot></slot>
  </button>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'primary' // info, primary, warning
  },
  size: {
    type: String,
    default: 'default' // small, default, large
  },
  icon: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  active: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

<style scoped lang="scss">
.cesium-button {
  border-radius: 4px;
  padding: 6px 12px;
  background: #303336;
  border: 1px solid #444;
  color: #edffff;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  user-select: none;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  // 尺寸变体
  &.small {
    height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    min-width: 70px;

    .button-icon {
      width: 20px;
      height: 20px;
    }

    &.icon-only {
      padding: 4px;
      width: 28px;
      height: 28px;
      min-width: unset;
    }
  }

  &.default {
    height: 32px;
    padding: 6px 12px;
    font-size: 13px;
    min-width: 80px;

    .button-icon {
      width: 24px;
      height: 24px;
    }

    &.icon-only {
      padding: 6px;
      width: 32px;
      height: 32px;
      min-width: unset;
    }
  }

  &.large {
    height: 36px;
    padding: 8px 16px;
    font-size: 14px;
    min-width: 90px;

    .button-icon {
      width: 30px;
      height: 30px;
    }

    &.icon-only {
      padding: 6px;
      width: 36px;
      height: 36px;
      min-width: unset;
    }
  }

  &:hover:not(.disabled) {
    background: #606266;
    border-color: #909399;
    box-shadow: 0 0 8px #fff;
  }

  // 类型变体

  &.info {
    &:hover:not(.disabled) {
      background: #999;
      border-color: #888;
    }
  }

  &.primary {
    &:hover:not(.disabled) {
      background: #48b;
      border-color: #aef;
    }
  }

  &.warning {
    &:hover:not(.disabled) {
      background: #855;
      border-color: #faa;
    }
  }

  &.active {
    background: #48b;
    border-color: #aef;
    box-shadow: 0 0 8px #fff;
  }

  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  .button-icon {
    object-fit: contain;
  }
}
</style> 